<template>
  <div>
    <el-card header="党团信息统计">
      <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
        <el-select 
          v-model="selectedGrade" 
          placeholder="选择专业"
          size="small"
          style="width: 150px;"
          @change="refreshChart">
          <el-option
            v-for="grade in gradeOptions"
            :key="grade"
            :label="`${grade}级`"
            :value="grade"
          />
        </el-select>
        <el-tag type="success" size="medium">党员总数：{{ totalPartyMembers }}</el-tag>
        <el-tag type="info" size="medium">团员总数：{{ totalLeagueMembers }}</el-tag>
      </div>
      
      <div id="partyChart" style="height: 300px; padding-left: 50px;"></div>
      
      <div class="chart-footer">
        <el-button type="text" size="small" @click="exportData">导出表格</el-button>
      </div>
    </el-card>
    
    <el-dialog title="学生党团信息详情" :visible.sync="detailDialogVisible" width="70%">
      <!-- 详情表格 -->
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PartyInfoChart',
  props: {
    partyData: {
      type: Object,
      required: true
    },
    studentData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      selectedGrade: 2024,
      gradeOptions: [2021, 2022, 2023, 2024],
      detailDialogVisible: false,
      currentStudents: [],
      chart: null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('partyChart'))
      const option = {
        // 图表配置
      }
      this.chart.setOption(option)
    },
    refreshChart() {
      this.initChart()
    },
    exportData() {
      // 导出逻辑
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>